import React from 'react'
import { Comment, Avatar, Card, Button } from 'antd';
import avatar from '@/assets/images/avatar.jpg'
import { SwapOutlined } from '@ant-design/icons'

const SingleComment = ({ children }) => (
  <Comment
    actions={[<span key="comment-nested-reply-to">回复</span>]}
    author={<a>借力好风</a>}
    avatar={
      <Avatar
        src={avatar}
        alt="借力好风"
      />
    }
    content={
      <p>
        我觉得很棒了！
      </p>
    }
  >
    {children}
  </Comment>
)

const switchCommentSort = () => {
  return (
    <Button type="text" icon={<SwapOutlined />}>
      切换为时间排序
    </Button>
  )
}

const ArticleComment = () => {
  return (
    <div>
      <Card size='small' title="条评论" extra={switchCommentSort()} style={{ boxShadow: '0 1px 3px rgb(18 18 18 / 10%)' }} >
        <SingleComment />
      </Card>
    </div>
  )
}

export default ArticleComment
